<html>
    <head>
        <title>Test</title>
        <style>

.box {
  background-color: rgba(240, 250, 255, 0.55);
  border-radius: 5dip;
  font-size: 20pt;
  text-align: center;
  line-height: 100%; 
  backdrop-filter: blur(20dip);  
  size: max-content;
  padding: 20dip 40dip;
  box-shadow: 2dip 10dip 24dip 0dip rgba(0,10,20,0.75);
  margin:*;
}

body {
  background: url(images/strawberry.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  
}

        </style>
        <script type="text/tiscript"></script>
    </head>
    <body>


    <div class="box" #test>
      <p>backdrop-filter: blur(20dip)</p>
    </div>


    </body>
</html>